<template>
  <div class="login_container">
    <div :style="bgImg"></div>

    <div class="login_box">
      <!-- 标题 -->
      <h3 class="title">MarkToTop文件管理</h3>
      <!-- 登录表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        class="Login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username" style="margin-top: 30px">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-yonghu-tianchong"
          ></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password" style="margin-top: 50px">
          <el-input
            v-model="loginForm.password"
            :type="passw"
            prefix-icon="iconfont icon-suo-tianchong"
          >
            <i slot="suffix" :class="icon" @click="showPass"></i>
          </el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item class="loginBtns" style="margin-top: 50px">
          <el-button type="primary" class="loginBtn" @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <p>asdasdasdasdasdasda</p>
      <p>asdasdasdasdasdasda</p>
      <p>asdasdasdasdasdasda</p>
    </div>

    <!-- 验证码 -->
    <Vcode
      :show="isShow"
      @success="success"
      @close="close"
      failText="你好垃圾，这验证都不能通过！"
      :canvasWidth="400"
      :canvasHeight="250"
    />
  </div>
</template>

<script >
import Vcode from 'vue-puzzle-vcode'
export default {
  data() {
    return {
      isShow: false,  // 验证码模态框状态
      passw: 'password',
      icon: 'iconfont icon-biyan',
      loginForm: {
        username: 'marktotop',
        password: '123456',
      },
      bgImg: {
        backgroundImage: 'url(' + require('../assets/background.jpg') + ')',
        height: '100vh',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%',
      },
      loginFormRules: {
        //验证用户名是否合法
        username: [
          { required: 'true', message: '请输入登录用户名', trigger: 'blur' },
          {
            min: 5,
            max: 11,
            message: '长度在 5 到 11 个字符之间！',
            trigger: 'blur',
          },
        ],
        password: [
          { required: 'true', message: '请输入登录密码', trigger: 'blur' },
          { min: 6, message: '长度不少于 6 个字符！', trigger: 'blur' },
        ],
      },
    }
  },
  components: {
    Vcode,
  },
  methods: {
    //密码的隐藏和显示
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == 'text') {
        this.passw = 'password'
        //更换图标
        this.icon = 'iconfont icon-biyan'
      } else {
        this.passw = 'text'
        this.icon = 'iconfont icon-yanjing-tianchong'
      }
    },
    login() {
      // 预校验
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) {
          return
        } else {
          // 校验成功，调起弹窗验证
          this.isShow = true
        }
      })
    },
    // 验证成功,登录
    async success() {
       this.isShow = false
      // 发起登录请求
      const { data: res } = await this.$http.post('/login', this.loginForm)
      // 登录失败，弹窗提示错误信息
      if (res.code !== 20000) {
        return this.$message.error(res.message)
      }
      // 登录成功
      // 发起请求用户信息，保存并进行跳转
      window.sessionStorage.setItem('secretKey', res.data.secretKey)
      this.$message.success(res.message)
      // //页面跳转
      this.$router.push('/home')
    },
    // 滑动验证点击遮罩关闭
    close() {
      this.isShow = false
    },
  },
}
</script>

<style lang="less" scoped>
/*  修改el-input样式  */
/deep/.el-input__inner {
  border: none;
  font-size: 18px;
  border-bottom: 3px solid #ccc;
}

/deep/.el-input__inner:hover {
  border: none;
  border-bottom: 3px solid #42a5f5;
}
/deep/.el-input__inner:focus {
  border-color: rgb(51, 50, 50);
}
// 登录页container
.login_container {
  height: 100%;
  min-width: 1180px;
}

.login_box {
  width: 300px;
  height: 350px;
  background-color: #fff;
  padding: 50px 50px;
  border-radius: 20px;
  position: absolute;
  right: 8%;
  top: 18%;
  box-shadow: 0 0 10px #ddd;
}
.title {
  margin-top: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  color: rgb(97, 67, 67);
}

.loginBtn {
  width: 100%;
}
.footer {
  width: 1280px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 15px;
}
</style>